<template>
  <div>
    <!-- html -->
    <h1>This is List Page ~~~</h1>
    <div>{{id}}</div>
    <ul>
      <li v-for="item in list" :key="item">
        <!-- 
          to 类似 a标签的href
          to='路径'
          to="{path:,}"
        -->
        <!-- <router-link :to="{path: id+"/"+item}">{{item}}</router-link> -->
        <router-link :to="{name: 'list_'+item}">name:{{item}}</router-link>
      </li>
    </ul>
    <!-- 二级路由 -->
    <router-view></router-view>
  </div>
</template>

<script>
// js
export default {
  created() {
    //来自字符串的传参   id?=xxx
    //$routh 记录当前理由的信息,例如路径、参数等
    //总结:如果动态路由,就用name +params跳转
    this.id = this.$route.params.id;
  },
  data() {
    return {
      list: ["html", "css", "js"]
    };
  }
};
</script>

<style>
/* css */
</style>
